<template>
	<view class="container">
		<u-navbar height="50" back-text="发布动态" 
		back-icon-name="close" 
		back-icon-size="30" 
		back-icon-color="#999999" 
		:back-text-style="{color:'#878787',fontSize:'35rpx',marginLeft:'30rpx'}" 
		title="">
			<view slot="right">
				<u-button :disabled="btnDisabled" :custom-style="btnCustomStyle" >发布</u-button>
			</view>
		</u-navbar>
		<u-input style="padding: 30rpx;"  v-model="data" height="150" type="textarea" placeholder="分享你此刻的想法...">
			
		</u-input>
		
		<u-upload style="padding: 30rpx;" :action="action" :file-list="fileList" :auto-upload="false" max-count="9" upload-text=""></u-upload>
		<u-gap height="15" bg-color="#F6F6F6"></u-gap>
		<view class="who">
			<u-icon style="margin-left: 30rpx;" name="eye-fill" size="45"></u-icon>
			<text class="who_item_2" style="">谁可以看</text>
			<view class="who_item_3">
				<text class="who_text">公开</text>	
				<u-icon color="#999999" name="arrow-right" size="25"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				fileList:[],	
				action:'',
				data:'',
				btnDisabled:true,
				fal:{width:'120rpx',height:'60rpx',marginRight:'30rpx',color:'#888888'},
				tr:{width:'120rpx',height:'60rpx',marginRight:'30rpx',color:'#ffffff',backgroundColor:'#1b975A'},
				btnCustomStyle:{width:'120rpx',height:'60rpx',marginRight:'30rpx',color:'#888888'}
			};
		},
		watch:{
			//监听输入框data，响应变动发布按钮样式
			data:{
				immediate: true,
				handler:function(val){
					
					if(val&&this.btnDisabled){
						this.btnDisabled = false
						this.btnCustomStyle = this.tr
					}
					else if(!val){
						this.btnDisabled = true
						this.btnCustomStyle = this.fal
					}
				}
			}
		},
		methods:{
			
			create(){
				let m = {
					nickName:'买辣椒也用券',
					avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic%2F0b%2F17%2F04%2F0b1704a9741f4e7ddd07939877dd3590_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643518167&t=1b98f6f16c4d584177b6db7d136dcdd8',
					content:this.data,
					imgList:[],
					time:new Date().getTime(),
					mobileType:'Realme X50 Pro',
					comments:{
						dzNum:8, 
						nickname:'山东科技大学土木工程与建筑学院',
						content:'java就图一乐，真正技术还得看jvav大佬'
					},
					dzNum:60,
					commentsNum:20
					
				}
				db.collection('posts_list').add(m)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		color: #888888;
		.container {
			background-color: #ffffff;
			.who {
				height: 85rpx;
				position:relative;
				display: flex;
				align-items: center;
				.who_item_2 {
					font-size: 26rpx;
					margin-left: 15rpx;
				}
				.who_item_3 {
					position: absolute;
					right: 2%;
					.who_text{
						font-size: 25rpx ;
						margin-right: 10rpx;
					}
				}
				
			}
		}
	}
</style>
